/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-08 
 */


import { defineComponent } from 'vue'
import './css/Star.scss'
import { useStars } from './hooks'
export default defineComponent({
  name: 'Star',
  props: {
    num: { type: Number, require: true},
    size: { type: Number, default: 16 }
  },
  setup(props, { emit, slots }) {
    const [ starNum, setStarNum ] = useStars(props.num, function() {
      emit('starNum', starNum.value)
    });
    function renderDom() {
      const { size } = props
      let domArr = []
      for (let i = 0; i < 5; i++) {
        domArr.push(<span 
          class={['iconfont icon-star', i < starNum.value ? 'active' : '']}
          style={{fontSize: size + 'px'}}
          onClick={setStarNum.bind(null, i + 1)}
          ></span>)
      }
      return domArr
    }
    return () => {
      return (
        <div class='stars'>
          {
            renderDom()
          }
        </div>
      )
    }
  }
})
